<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-row class="main-color mt-[20px]">
				<el-col :span="6"  class="v-flex">
					<span class="w-[100px] text-right">投诉订单编号：</span>
					<el-input disabled class="flex-1 ml-[10px] w-[200px]" placeholder="请输入"></el-input>
				</el-col>
				<el-col :span="6"  class="v-flex ml-30px">
					<span class="w-[100px] text-right">销售：</span>
					<el-input disabled class="flex-1 ml-[10px] w-[200px]" placeholder="请输入"></el-input>
				</el-col>
			</el-row>
			<el-row class="mt-[20px]">
				<el-col :span="6">
					<div class="main-color v-flex">
						<span class="w-[100px] text-right">投诉产品：</span>
						<el-select multiple placeholder="请选择" class="flex-1 ml-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
			<div class="mt-[30px]" v-for="(item,index) in Data" :key="index">
				<div class=" font-bold main-color">产品{{index+1}}</div>
				<div class="mt-[20px] p-3 bg-[#F7FAFC]">
					<el-row class="mt-[20px]">
						<el-col :span="10" class="v-flex v-col-top">
							<span class="main-color">投诉描述： </span>
							<el-upload class="avatar-uploader"
								action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
								:show-file-list="false" :on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload" >
								<img v-if="imageUrl" :src="imageUrl" class="avatar" />
								<el-icon v-else class="avatar-uploader-icon">
									<Plus />
								</el-icon>
							</el-upload>
						</el-col>
					</el-row>
					<el-row class="main-color mt-[20px]">
						<el-col :span="10"  class="v-flex v-col-top">
							<span class="w-[100px] text-right">投诉描述：</span>
							<el-input  type="textarea" :rows="3" class="flex-1 ml-[10px] w-[200px]" placeholder="请输入"></el-input>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
	const imageUrl = ref('')//图片上传
	const handleAvatarSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	}
	const beforeAvatarUpload : UploadProps['beforeUpload'] = (rawFile) => {
	
		return true
	}
	const Data = ref<Array<any>>([
		{},{}
	])
</script>

<style scoped lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		text-align: center;
		background: #F7F7F7;
	}
	:deep() .el-textarea__inner{
		background-color: #F7FAFC;
	}
</style>